<template>
  <div id="enterinfo">
    <!-- 类型 -->
    <div class="enterinfotype">
      <typetitle :isshowbottom="true">
        <!-- <h3 slot="bigtitle">类型</h3> -->
        <p slot="title-desc">
          温馨提示：当前选择类型总校/直营，您需要确认/补全标红信息;
          <br />
          请确保信息真实有效，不得冒用他人身份或驾校资质，一经发现将承担所有法律责任，并永久撤销该注册人平台使用资格。
        </p>
      </typetitle>
    </div>

    <!-- 表单区域 -->
    <el-form
      ref="enterinfoform"
      :model="enterinfo"
      :disabled="isDisabled || !checkPermission(['schoolBaseinfoApply'])"
      :rules="enterinforules"
      label-position="right"
      label-width="120px"
    >
      <!-- 入驻信息 -->
      <div class="enterinfo-content">
        <typetitle :isshowdesc="true" :isshowmore="true">
          <h3 slot="bigtitle">入驻信息</h3>
        </typetitle>
        <!-- 文字弹窗 -->
        <textDialog
          :isshowtextDialogs="isshowenterDialg"
          :dialogTitle="'说明'"
          @closetextDialog="closeEnterdesc"
        >
          <p>
            总校会展示在万骏驾考中，用于营销、招生、管理，需要提供手持身份证照、管理员授权证明、营业执照、道路运输许可证、驾校照片、对公打款验证；
          </p>
          <p>
            分校会展示在万骏驾考中，需要提供手持身份证照、管理员授权证明、营业执照、驾校照片、总校授权证明；
          </p>
          <p>代理不会展示在万骏驾考中，主要用于招生，需要提供手持身份证照；</p>
          <p>为不影响您的正常使用，请根据驾校实际情况，选择类型。</p>
        </textDialog>
        <div class="formareaone">
          <el-row>
            <el-col :span="12">
              <el-form-item label="城市" prop="city">
                <el-cascader
                  placeholder="请选择城市"
                  :options="cityOptions"
                  v-model="enterinfo.city"
                  :show-all-levels="true"
                  @change="changeArea"
                  :style="{ width: '90%' }"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-input
                  :disabled="true"
                  v-model="enterinfo.type"
                  placeholder="请输入类型"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="驾校名称" prop="short_title">
                <el-input
                  v-model="enterinfo.short_title"
                  placeholder="请输入驾校名称,如:万骏驾校"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业名称" prop="title">
                <el-input
                  v-model="enterinfo.title"
                  placeholder="需与营业执照名称一致"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="leader_man">
                <el-input
                  v-model="enterinfo.leader_man"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="leader_tel">
                <el-input
                  :disabled="true"
                  v-model="enterinfo.leader_tel"
                  placeholder="请输入手机号"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 认证信息 -->
      <div class="authinfo">
        <typetitle :isshowdesc="true">
          <h3 slot="bigtitle">认证信息</h3>
          <p slot="desccontent" style="color: #999">
            上传的文件限10M以内，jpeg，jpg，png和bmp等图片文件格式
          </p>
        </typetitle>
        <div class="formarea">
          <el-row style="margin-bottom: 20px; margin-top: 20px">
            <el-col :span="12">
              <el-form-item label="营业执照" prop="license">
                <uploadimg
                  @deleteimg="licensedel"
                  :imgModel="enterinfo.license"
                  @uploadimgok="licenseok"
                  :isdeleteicon="isDelimg"
                >
                  <span slot="text">照片中请勿添加联系电话、广告等信息</span>
                  <span slot="text">复印件请加盖公章</span>
                </uploadimg>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="道路运输许可证" prop="road_permit">
                <uploadimg
                  @deleteimg="road_permitdel"
                  :imgModel="enterinfo.road_permit"
                  @uploadimgok="road_permitok"
                  :isdeleteicon="isDelimg"
                >
                  <span slot="text">照片中请勿添加联系电话、广告等信息</span>
                  <span slot="text">复印件请加盖公章</span>
                </uploadimg>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="12">
              <el-form-item label="手持身份证照" prop="id_card">
                <uploadimg
                  @deleteimg="id_carddel"
                  :imgModel="enterinfo.id_card"
                  @uploadimgok="id_cardok"
                  :isdeleteicon="isDelimg"
                >
                  <span slot="text">请上传管理员清晰有效的手持身份证照片</span>
                  <span slot="text">上传非手持身份证照片无效</span>
                </uploadimg>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理员授权证明" prop="grant">
                <uploadimg
                  @deleteimg="grantdel"
                  :imgModel="enterinfo.grant"
                  @uploadimgok="grantok"
                  :isdeleteicon="isDelimg"
                >
                  <span slot="text">
                    请按照模版开具授权证明
                    <a
                      href="https://oss.juchehulian.com/Word/%E9%A9%BE%E6%A0%A1%E4%BF%A1%E6%81%AF%E5%A7%94%E6%89%98%E7%AE%A1%E7%90%86%E6%8E%88%E6%9D%83%E4%B9%A6%EF%BC%88%E6%A8%A1%E6%9D%BF%EF%BC%89.doc"
                      slot="loadtemplate"
                    >
                      下载模板
                    </a>
                  </span>
                  <span slot="text">按规范上传，否则会导致审核失败</span>
                </uploadimg>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 驾校信息 -->
      <div class="drivinginfo">
        <typetitle :isshowdesc="true">
          <h3 slot="bigtitle">驾校信息</h3>
        </typetitle>
        <div class="formarea">
          <el-row style="margin-bottom: 20px">
            <el-col :span="12">
              <el-form-item label="驾校图片" prop="head_img">
                <uploadimg
                  @deleteimg="head_imgdel"
                  :imgModel="enterinfo.head_img"
                  @uploadimgok="head_imgok"
                  :isdeleteicon="isDelimg"
                >
                  <span slot="text">不能带联系电话、微信号、拿本时间等等</span>
                  <span slot="text">不能为“人像”合影照片</span>
                  <span slot="text">封面图的公司名称需与注册公司名称一致</span>
                </uploadimg>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  placeholder="请点击右边选择地图来选择地址"
                  :disabled="true"
                  v-model="enterinfo.address"
                >
                  <template slot="append">
                    <el-button @click="selectmap">选择地图</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
            <!-- 地图弹窗 -->
            <mapDialog
              v-if="isshowmap"
              :userSelectinfo="selectmapinfo"
              :isshowmapDialog="isshowmap"
              @closemap="closemap"
              @affirmMaps="affirmMap"
            ></mapDialog>
          </el-row>
          <!-- 驾校介绍 -->
          <!-- <el-row>
                   <el-col :span="24">
                     <el-form-item label="驾校介绍" prop="description">
                       <el-input
                        type="textarea"
                        size='large'
                        rows="6"
                        placeholder="请输入驾校的介绍和特色"
                        v-model="enterinfo.description">
                      </el-input>
                    </el-form-item>
                   </el-col>
                 </el-row> -->
          <!-- 联系方式 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="微信" prop="wechat">
                <el-input
                  v-model="enterinfo.wechat"
                  placeholder="请输入管理员微信"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ" prop="qq">
                <el-input
                  v-model="enterinfo.qq"
                  placeholder="请输入管理员QQ"
                  clearable
                  :style="{ width: '90%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 提交按钮 -->
          <el-row v-if="authStatus != 0 && authStatus != 1">
            <el-col :span="24" class="subarea">
              <el-button type="primary" class="subbtn" @click="gosubform">
                提交审核
              </el-button>
            </el-col>
          </el-row>
          <!-- 底部信息区域 -->
          <el-row>
            <el-col :span="24" class="bottom-info">
              <div class="bottomTip">
                <i class="el-icon-warning-outline"></i>
                <p>
                  有任何疑问，请联系我们。电话：028-85031088
                  客服微信：Jchl_KF（18202879868）
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
//引入标题组件
import typetitle from './typetitle'
//引入文字弹窗组件 公共
import textDialog from '@/components/textDialog/textDialog'
//图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
//地图弹窗组件
import mapDialog from '@/components/selectmap/selectmap'
//api
import { getSchool, submitData } from '@/api/school'
import { getArea } from '@/api/common'
import { mapGetters } from 'vuex'
//按钮权限验证
import checkPermission from '@/utils/permission'

export default {
  data() {
    return {
      //是否禁用删除图片
      isDelimg: false,
      //是否禁用表单
      isDisabled: false,
      //表单状态
      authStatus: '',
      //用户选择的地图
      selectmapinfo: {},
      //是否选择地图弹窗
      isshowmap: false,
      //是否显示入驻信息弹窗
      isshowenterDialg: false,
      //表单
      enterinfo: {
        //城市名字
        city: [2277, 2278],
        //类型
        type: '',
        //驾校简称
        short_title: '',
        //驾校全称
        title: '',
        //姓名
        leader_man: '',
        //手机号
        leader_tel: '',
        //是否上传了图片手持上传身份证
        id_card: '',
        //管理员图片
        grant: '',
        //营业执照图片
        license: '',
        //驾校图片
        head_img: '',
        //道路运输许可证
        road_permit: '',
        //详细地址
        address: '',
        //驾校介绍
        description: '',
        //微信
        wechat: '',
        //qq
        qq: '',
        lat: '',
        lng: '',
      },
      //城市选项
      cityOptions: [],
      //用户选择的坐标信息
      lat: '',
      lng: '',
      //表单验证
      enterinforules: {
        city: [
          {
            required: true,
            message: '请选择城市',
            trigger: 'change',
          },
        ],
        type: [
          {
            required: true,
            message: '请输入类型',
            trigger: 'change',
          },
        ],
        short_title: [
          {
            required: true,
            message: '请输入驾校简称',
            trigger: 'change',
          },
        ],
        title: [
          {
            required: true,
            message: '请输入驾校名字',
            trigger: 'change',
          },
        ],
        leader_man: [
          {
            required: true,
            message: '请输入名字',
            trigger: 'change',
          },
        ],
        leader_tel: [
          {
            required: true,
            message: '请输入名字',
            trigger: 'change',
          },
        ],
        description: [
          {
            required: false,
            message: '请输入驾校简介',
            trigger: 'change',
          },
        ],
        address: [
          {
            required: true,
            message: '请选择驾校地址',
            trigger: 'change',
          },
        ],
        id_card: [
          {
            required: true,
            message: '手持身份证照不能为空',
            trigger: 'change',
          },
        ],
        grant: [
          {
            required: true,
            message: '管理员授权证明不能为空',
            trigger: 'change',
          },
        ],
        license: [
          {
            required: true,
            message: '营业执照不能为空',
            trigger: 'change',
          },
        ],
        head_img: [
          {
            required: true,
            message: '驾校照片不能为空',
            trigger: 'change',
          },
        ],
        road_permit: [
          {
            required: true,
            message: '道路运输许可证不能为空',
            trigger: 'change',
          },
        ],
      },
    }
  },
  props: {},
  mounted() {
    //获取认证信息
    this.getauthInfo()
    //获取城市选项
    this.getCityOption()
  },
  watch: {},
  components: {
    typetitle,
    textDialog,
    uploadimg,
    mapDialog,
  },
  computed: {
    isable() {
      if (this.authStatus == 1) {
        this.isDisabled = true
        return true
      }
    },
  },
  methods: {
    checkPermission,
    //选择地区触发
    changeArea(val) {},
    //获取城市
    async getCityOption() {
      let data = await getArea()
      this.cityOptions = data.data
    },
    //删除图片 身份证
    id_carddel() {
      this.enterinfo.id_card = ''
    },
    //删除授权证明
    grantdel() {
      this.enterinfo.grant = ''
    },
    //删除营业执照
    licensedel() {
      this.enterinfo.license = ''
    },
    //删除驾校图片
    head_imgdel() {
      this.enterinfo.head_img = ''
    },
    //删除运输许可证
    road_permitdel() {
      this.enterinfo.road_permit = ''
    },
    //身份证图片上传成功
    id_cardok(imgurl) {
      this.enterinfo.id_card = imgurl
    },
    // 管理员授权证明成功
    grantok(imgurl) {
      this.enterinfo.grant = imgurl
    },
    // 营业执照
    licenseok(imgurl) {
      this.enterinfo.license = imgurl
    },
    //驾校图片
    head_imgok(imgurl) {
      this.enterinfo.head_img = imgurl
    },
    //运输许可证
    road_permitok(imgurl) {
      this.enterinfo.road_permit = imgurl
    },
    //获取认证信息
    async getauthInfo() {
      let data = await getSchool()
      if (data.code == '0000' && data.data) {
        data.data.type = data.data.type.title
        this.authStatus = data.data.status.value
        this.enterinfo = data.data
        this.enterinfo.city = data.data.city.relation
      }

      if (this.authStatus == -1) {
        //认证信息
        //是否可以更改图片
        this.isDelimg = true
      }

      if (this.authStatus == 0) {
        //平台审核
        //禁表单
        this.isDisabled = true
      }

      if (this.authStatus == 1) {
        //已通过
        //禁表单
        this.isDisabled = true
      }

      if (this.authStatus == 2) {
        //不同意
        //是否可以更改图片
        this.isDelimg = true
      }
    },
    //用户点击提交信息
    async gosubform() {
      let {
        city,
        type,
        leader_tel,
        status,
        adopt_time,
        commit_time,
        create_time,
        delete_time,
        update_time,
        id,
        parent_id,
        ...params
      } = this.enterinfo
      //验证表单是否填写完 valid 返回true or false
      this.$refs['enterinfoform'].validate(async (valid) => {
        if (!valid) return
        // 提交表单
        params.city = city[city.length - 1]
        let data = await submitData(params)
        if (data.code == '0000') {
          this.$baseMessage('提交审核成功,请耐心等待审核结果！', 'success')
          document.documentElement.scrollTop = 0
          //重新请求获取数据接口
          this.getauthInfo()
          //通知进度条组件更新
          this.$emit('accomplish')
        }
      })
    },
    //用户确认选择地图
    affirmMap(params) {
      this.selectmapinfo = params
      this.enterinfo.address = params.address
      this.enterinfo.lat = params.lat
      this.enterinfo.lng = params.lng
      this.isshowmap = false
    },
    //用户选择地图
    selectmap() {
      if (this.authStatus == 0) {
        // 回填地图数据
        this.selectmapinfo = {
          address: this.enterinfo.address,
          lat: this.enterinfo.lat,
          lng: this.enterinfo.lng,
        }
      } else if (this.authStatus == -1) {
      }

      //打开弹窗
      this.isshowmap = true
    },
    //关闭弹窗
    closemap() {
      this.isshowmap = false
    },
    //点击查看说明
    lookEnterinfo() {
      this.isshowenterDialg = true
    },
    //关闭说明弹窗
    closeEnterdesc() {
      this.isshowenterDialg = false
    },
  },
}
</script>

<style scoped lang='scss'>
#enterinfo {
  .schoolcontent {
    .school-item {
      display: flex;
      align-items: center;
      width: 302px;
      height: 92px;
      background: #f1f7ff;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      padding: 0 24px 0 20px;
      cursor: pointer;
      margin-right: 24px;
      display: flex;
      align-items: center;
      box-sizing: border-box;

      img {
        width: 60px;
        height: 60px;
      }
      .right-text {
        margin-left: 10px;
        span {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.65);
        }
      }
      p {
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
      }
    }
  }
  .enterinfotype {
    margin-bottom: 20px;
  }
  .authinfo {
    .tipcontent {
      span {
        display: block;
        line-height: 20px;
        font-size: 12px;
        color: #666;
      }
    }
  }
  .subarea {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    flex-direction: column;
    align-items: center;
    .subbtn {
      width: 320px;
      height: 45px;
      font-size: 16px;
    }

    p {
      font-size: 14px;
      color: #999;
    }
  }
}
.bottomTip {
  display: flex;
  align-items: center;
  i {
    margin-right: 6px;
    color: #999;
  }
  p {
    color: #999;
  }
}
.bottom-info {
  display: flex;
  justify-content: center;
}
</style>
